import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Save, Upload, Download, Play, Pause, RotateCcw, Plus, Trash2, Edit3, Eye, Share2, Users, Clock, Star } from 'lucide-react'

const ScriptEditor = () => {
  const [currentScene, setCurrentScene] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false)
  const [scriptTitle, setScriptTitle] = useState('我的京剧剧本')
  const [scriptDescription, setScriptDescription] = useState('')

  const scenes = [
    {
      id: 1,
      title: '开场',
      description: '角色登场，背景介绍',
      characters: ['主角', '配角'],
      duration: '3分钟',
      content: '在古老的京城，一位年轻的京剧演员正在准备他的首场演出...',
      choices: [
        { text: '选择传统唱腔', nextScene: 2 },
        { text: '尝试现代改编', nextScene: 3 }
      ]
    },
    {
      id: 2,
      title: '传统演绎',
      description: '经典京剧唱段',
      characters: ['主角'],
      duration: '5分钟',
      content: '演员开始演唱传统京剧《贵妃醉酒》选段，展现深厚的功底...',
      choices: [
        { text: '继续传统表演', nextScene: 4 },
        { text: '加入现代元素', nextScene: 5 }
      ]
    },
    {
      id: 3,
      title: '现代融合',
      description: '创新表演方式',
      characters: ['主角', '现代舞者'],
      duration: '4分钟',
      content: '演员与现代舞者合作，将京剧与当代舞蹈完美融合...',
      choices: [
        { text: '观众反响热烈', nextScene: 6 },
        { text: '传统观众不满', nextScene: 7 }
      ]
    }
  ]

  const characters = [
    { id: 1, name: '主角', type: '生角', description: '年轻京剧演员', color: 'from-blue-400 to-indigo-500' },
    { id: 2, name: '配角', type: '旦角', description: '传统京剧演员', color: 'from-pink-400 to-rose-500' },
    { id: 3, name: '现代舞者', type: '现代角色', description: '当代舞蹈演员', color: 'from-purple-400 to-violet-500' }
  ]

  const [selectedCharacter, setSelectedCharacter] = useState(null)
  const [isEditing, setIsEditing] = useState(false)

  return (
    <div className="min-h-screen pt-16 theme-creator">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="text-6xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
            剧本编辑器
          </h1>
          <p className="text-xl text-white/80 max-w-3xl mx-auto jing-content">
            📝 创作您的京剧互动剧本，让传统艺术与现代科技完美融合
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-4 gap-8">
          {/* 剧本信息 */}
          <motion.div
            className="lg:col-span-1 space-y-6"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            {/* 剧本基本信息 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">剧本信息</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-white/80 mb-2">剧本标题</label>
                  <input
                    type="text"
                    value={scriptTitle}
                    onChange={(e) => setScriptTitle(e.target.value)}
                    className="jing-input w-full"
                    placeholder="输入剧本标题"
                  />
                </div>
                <div>
                  <label className="block text-white/80 mb-2">剧本描述</label>
                  <textarea
                    value={scriptDescription}
                    onChange={(e) => setScriptDescription(e.target.value)}
                    className="jing-input w-full h-24 resize-none"
                    placeholder="描述您的剧本内容..."
                  />
                </div>
                <div className="flex space-x-2">
                  <button className="flex-1 jing-button flex items-center justify-center space-x-2">
                    <Save size={16} />
                    <span>保存</span>
                  </button>
                  <button className="flex-1 glass-effect px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-all flex items-center justify-center space-x-2">
                    <Upload size={16} />
                    <span>发布</span>
                  </button>
                </div>
              </div>
            </div>

            {/* 角色管理 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">角色管理</h3>
              <div className="space-y-3">
                {characters.map((character) => (
                  <div
                    key={character.id}
                    className={`p-3 rounded-lg border-2 cursor-pointer transition-all ${
                      selectedCharacter?.id === character.id
                        ? 'border-jing-red bg-jing-red/20'
                        : 'border-white/20 hover:border-white/40'
                    }`}
                    onClick={() => setSelectedCharacter(character)}
                  >
                    <div className="flex items-center space-x-3">
                      <div className={`w-8 h-8 bg-gradient-to-r ${character.color} rounded-full`}></div>
                      <div className="flex-1">
                        <div className="text-white font-semibold">{character.name}</div>
                        <div className="text-white/60 text-sm">{character.type}</div>
                      </div>
                    </div>
                  </div>
                ))}
                <button className="w-full p-3 glass-effect rounded-lg text-white hover:bg-white/20 transition-all flex items-center justify-center space-x-2">
                  <Plus size={16} />
                  <span>添加角色</span>
                </button>
              </div>
            </div>

            {/* 场景列表 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">场景列表</h3>
              <div className="space-y-2">
                {scenes.map((scene, index) => (
                  <div
                    key={scene.id}
                    className={`p-3 rounded-lg cursor-pointer transition-all ${
                      currentScene === index
                        ? 'bg-jing-red/20 border border-jing-red/50'
                        : 'glass-effect hover:bg-white/10'
                    }`}
                    onClick={() => setCurrentScene(index)}
                  >
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="text-white font-semibold">{scene.title}</div>
                        <div className="text-white/60 text-sm">{scene.duration}</div>
                      </div>
                      <div className="flex space-x-1">
                        <button className="p-1 glass-effect rounded hover:bg-white/20 transition-all">
                          <Edit3 size={14} className="text-white" />
                        </button>
                        <button className="p-1 glass-effect rounded hover:bg-white/20 transition-all">
                          <Trash2 size={14} className="text-white" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
                <button className="w-full p-3 glass-effect rounded-lg text-white hover:bg-white/20 transition-all flex items-center justify-center space-x-2">
                  <Plus size={16} />
                  <span>添加场景</span>
                </button>
              </div>
            </div>
          </motion.div>

          {/* 编辑器主体 */}
          <motion.div
            className="lg:col-span-3 space-y-6"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            {/* 工具栏 */}
            <div className="jing-card">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-2xl font-bold text-white">
                  {scenes[currentScene]?.title || '选择场景'}
                </h2>
                <div className="flex space-x-2">
                  <button 
                    onClick={() => setIsPlaying(!isPlaying)}
                    className="p-3 jing-gradient rounded-lg hover:scale-110 transition-all"
                  >
                    {isPlaying ? <Pause size={20} className="text-white" /> : <Play size={20} className="text-white" />}
                  </button>
                  <button className="p-3 glass-effect rounded-lg hover:bg-white/20 transition-all">
                    <RotateCcw size={20} className="text-white" />
                  </button>
                  <button className="p-3 glass-effect rounded-lg hover:bg-white/20 transition-all">
                    <Download size={20} className="text-white" />
                  </button>
                </div>
              </div>

              {scenes[currentScene] && (
                <div className="space-y-4">
                  {/* 场景信息 */}
                  <div className="grid md:grid-cols-3 gap-4">
                    <div className="glass-effect p-4 rounded-lg">
                      <div className="text-white/70 text-sm mb-1">场景描述</div>
                      <div className="text-white">{scenes[currentScene].description}</div>
                    </div>
                    <div className="glass-effect p-4 rounded-lg">
                      <div className="text-white/70 text-sm mb-1">参与角色</div>
                      <div className="text-white">{scenes[currentScene].characters.join(', ')}</div>
                    </div>
                    <div className="glass-effect p-4 rounded-lg">
                      <div className="text-white/70 text-sm mb-1">预计时长</div>
                      <div className="text-white">{scenes[currentScene].duration}</div>
                    </div>
                  </div>

                  {/* 场景内容编辑 */}
                  <div className="jing-card">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="text-xl font-bold text-white">场景内容</h3>
                      <button 
                        onClick={() => setIsEditing(!isEditing)}
                        className="flex items-center space-x-2 glass-effect px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-all"
                      >
                        <Edit3 size={16} />
                        <span>{isEditing ? '预览' : '编辑'}</span>
                      </button>
                    </div>

                    {isEditing ? (
                      <textarea
                        className="jing-input w-full h-48 resize-none"
                        value={scenes[currentScene].content}
                        placeholder="输入场景内容..."
                      />
                    ) : (
                      <div className="glass-effect p-6 rounded-lg">
                        <p className="text-white/90 leading-relaxed text-lg">
                          {scenes[currentScene].content}
                        </p>
                      </div>
                    )}
                  </div>

                  {/* 选择分支 */}
                  <div className="jing-card">
                    <h3 className="text-xl font-bold text-white mb-4">选择分支</h3>
                    <div className="space-y-3">
                      {scenes[currentScene].choices.map((choice, index) => (
                        <motion.div
                          key={index}
                          className="p-4 glass-effect rounded-lg hover:bg-white/10 transition-all cursor-pointer group"
                          whileHover={{ scale: 1.02 }}
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-3">
                              <div className="w-8 h-8 jing-gradient rounded-full flex items-center justify-center text-white font-bold">
                                {index + 1}
                              </div>
                              <span className="text-white group-hover:text-jing-red transition-colors">
                                {choice.text}
                              </span>
                            </div>
                            <div className="flex items-center space-x-2 text-white/60">
                              <span className="text-sm">场景 {choice.nextScene}</span>
                              <button className="p-1 glass-effect rounded hover:bg-white/20 transition-all">
                                <Edit3 size={14} className="text-white" />
                              </button>
                            </div>
                          </div>
                        </motion.div>
                      ))}
                      <button className="w-full p-4 glass-effect rounded-lg text-white hover:bg-white/20 transition-all flex items-center justify-center space-x-2">
                        <Plus size={16} />
                        <span>添加选择分支</span>
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* 预览和测试 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">预览和测试</h3>
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold text-white">场景预览</h4>
                  <div className="glass-effect p-6 rounded-lg">
                    <div className="text-white/80 mb-4">
                      {scenes[currentScene]?.content || '选择场景进行预览'}
                    </div>
                    <div className="flex space-x-2">
                      <button className="px-4 py-2 bg-jing-red/20 text-jing-red rounded-lg hover:bg-jing-red/30 transition-all">
                        选择1
                      </button>
                      <button className="px-4 py-2 bg-jing-gold/20 text-jing-gold rounded-lg hover:bg-jing-gold/30 transition-all">
                        选择2
                      </button>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-lg font-semibold text-white">测试数据</h4>
                  <div className="space-y-3">
                    <div className="flex justify-between text-white/70">
                      <span>总场景数</span>
                      <span className="text-white">{scenes.length}</span>
                    </div>
                    <div className="flex justify-between text-white/70">
                      <span>总角色数</span>
                      <span className="text-white">{characters.length}</span>
                    </div>
                    <div className="flex justify-between text-white/70">
                      <span>预计总时长</span>
                      <span className="text-white">12分钟</span>
                    </div>
                    <div className="flex justify-between text-white/70">
                      <span>完成度</span>
                      <span className="text-jing-gold">75%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

export default ScriptEditor


